<template>
    <div infinite-scroll-distance="20"
            v-infinite-scroll="addmore"
            infinite-scroll-disabled="busy"
            :infinite-scroll-immediate-check="true" >
        <div class="jingdian" v-for="(item,index) in datas" :key="index" >
            <div>
            <img :src="require('../../../../static/mock/image/'+item.img)" style="width:100%">
            </div>
            <div>
                <p style="font-size:14px;font-weight: bolder;">{{item.title}}</p>
                <div style="font-size:60%; ">
                    <span style="color:red;font-size:17px">¥{{item.price}}</span> 
                    <span style="font-size:13px">起</span>
                    <s style="color:#444;font-size:16px;">¥{{item.delprice}}</s> 
                    <span style="float:right;color:#333;font-size:10px" >{{item.scode}}分</span>
                
                </div>
                    
                 <p style="color:#777;font-size:10px">{{item.detail}}</p>
            </div>

            </div>
    </div>
</template>
<script>
import { Indicator } from 'mint-ui';
import { Loadmore } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
    data(){
        return {
            datas:{},
            busy:false,
            page:1,
            loadBottom:40

        }
    },
    methods:{
        getData(page){
             this.$http.get(`http://jingdiantest.applinzi.com/jingdian?page=${page}`).then(res=>{
            console.log(res.data);
            this.datas = [...this.datas,...res.data];
            this.busy=false;
            Indicator.close();
            })
        },
        addmore(){
            if(this.page<7){
                   Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
                });
            this.busy=true;
            this.page+=1;
            this.getData(this.page);
            }else{
                this.busy =true;
                MessageBox('提示', '没有更多数据了');
                return;
            }
         
        },
       
    },
    mounted(){
       this.getData(this.page);
    }
}
</script>

<style scoped>
*{
    margin: 0;padding: 0
}
.jingdian{
    margin: 20px;
    display: flex;
    justify-content: space-between;
   
    
}
.jingdian div:nth-child(1){
    flex: 0 0 30%;
}
.jingdian div:nth-child(2){
    padding-left:8px; 
    flex: 0 0 70%;
}


</style>
